<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em class="all_article">10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em class="day_article">123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em class="all_comments">35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em class="day_comments">123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>

    <script src="./js/http.js"></script>
    <script>
        $(function () {
            // 数据统计
            datas();

            //获取 日新增文章数量统计s
            day_article()

            // 各类型文章数量统计
            article_type()

            // 日文章访问量
            column_show();

            // 折线图
            // line_chart();
            //饼状图
            // pie_chart();
            // 柱状图
            // bar_chart();

        });
        // 数据统计
        function datas() {
            // 获取文章、评论相关数据
            myAjax('get', '/admin/data/info', null, function (resData) {
                $('.all_article').html(resData.totalArticle);
                $('.day_article').html(resData.dayArticle);
                $('.all_comments').html(resData.totalComment);
                $('.day_comments').html(resData.dayComment);
            })
        }

        //获取 日新增文章数量统计
        function day_article() {
            // x数据
            // let xAxisData = [];
            // 折线图数据
            // let lineData = [];
            // 发出ajax请求
            myAjax('get', '/admin/data/article', null, function (resData) {
                // resData.date.forEach(item => {
                //     xAxisData.push(item.date);
                //     lineData.push(item.count);
                // });

                //用map方法获取数据
                let xData = resData.date.map(item => item.date);
                let line_Data = resData.date.map(item => item.count)
                // 执行折线图
                line_chart(xData, line_Data);
            });




        }

        //各类型文章数量统计
        function article_type() {
            // 请求各类型文章数量
            myAjax('get', '/admin/data/category', null, function (resData) {
                // console.log(resData);

                let name = resData.date.map(item => item.name);
                let value = resData.date.map(item => ({
                    name: item.name,
                    value: item.articles,
                }))
                //饼图
                pie_chart(name, value);
            })
        }

        // 日文章访问量
        function column_show() {
            // 发出Ajax请求文章访问量
            myAjax('get', '/admin/data/visit', null, function (resData) {
                let xdata = [];
                let bardata = [];

                // 遍历拿到数据
                for (let key in resData.data) {
                    xdata.push(key);
                    bardata.push(resData.data[key]);
                }
                // console.log(xdata, bardata);
                bar_chart(xdata, bardata);
            })
        }



        // 折线图
        function line_chart(xAxisData, lineData) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('curve_show'));
            option = {
                title: {
                    text: '日新增文章数量统计',
                    left: 'center',
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData,
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis',
                },
                // 渐变色
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                                offset: 0,
                                color: 'red'
                            },
                            {
                                offset: 1,
                                color: '#fff'
                            }
                        ]
                    )
                },
                series: [{
                    name: '日新增文章数量',
                    data: lineData,
                    type: 'line', //折线图
                    smooth: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {}
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }


        // 饼状图
        function pie_chart(name, value) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pie_show'));
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    left: 10,
                    data: name
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    data: value
                }]
            };
            myChart.setOption(option);
        }

        // 柱状图
        function bar_chart(xdata, bardata) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('column_show'));
            option = {
                title: {
                    text: '日文章访问量',
                    left: 'center',
                },
                xAxis: {
                    type: 'category',
                    data: xdata
                },
                yAxis: {
                    type: 'value'
                },
                barWidth: "50%",
                tooltip: {},
                itemStyle: {
                    color: "rgba(181, 45, 239, 1)"
                },
                series: [{
                    data: bardata,
                    type: 'bar'
                }]
            };
            myChart.setOption(option);
        }
    </script>
</body>

</html>